<template>
	<view class="pagesBox">
		<u-avatar size="200"></u-avatar>
		<view class="line"></view>
		<view class="title1">申请获取以下权限</view>
		<view class="title2">获得你绑定的手机号</view>
		<view class="title2">不授权将无法使用该小程序的部分功能</view>
		<view class="submitBox">
			<button class="btn btn1" hover-class="btnHover1" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
			<view class="btn btn2" hover-class="btnHover2" @click="backHandle">暂不授权</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				delta:1,
				reg_id:'',
				pageBack:'',
				isDelToken:true
			}
		},
		onLoad(option) {
			this.pageBack = option.pageBack || '';
			this.getCode()
		},
		methods: {
			getCode(){
				uni.login({
					success: (res)=> {
						this.code = res.code;
					}
				})
			},
			async getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					let res = await uni.$http('POST','user/bindPhone',{
						code:this.code,
						encryptedData:e.detail.encryptedData,
						iv: e.detail.iv
					})
					console.log('授权手机号',res);
					if(res.code == 1){
						uni.$u.toast('授权成功')
						setTimeout(()=>{
							if(this.pageBack == 'login'){
								uni.navigateBack({
									delta:2
								})
							}else{
								uni.navigateBack()
							}
						},1000)
					}else{
						uni.$u.toast('授权失败，请重新授权');
						uni.removeStorageSync('token')
					}
				}else{
					uni.$u.toast('授权失败，请重新授权');
					uni.removeStorageSync('token')
				}
			},
			backHandle(){
				uni.removeStorageSync('token')
				if(this.pageBack == 'login'){
					uni.navigateBack({
						delta:2
					})
				}else{
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding-top: 50rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.imageBox{
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid #FFFFFF;
		box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.2);
		margin: 0 auto;
	}
	.line{
		width: 690rpx;
		height: 4rpx;
		background: #DDDDDD;
		border-radius: 2rpx;
		margin-top: 90rpx;
	}
	.title1{
		color: #fff;
		font-size: 36rpx;
		margin-top: 50rpx;
	}
	.title2{
		color: #999999;
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.submitBox{
		width: 100%;
		margin-top: 80rpx;
		letter-spacing: 2rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.btn{
			width: 80%;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn1{
			background-color: #00a30a;
			border-radius: 40rpx;
			margin-bottom: 40rpx;
		}
		.btn2{
			color: #747474;
			background-color: #cbcbcb;
			border-radius: 40rpx;
		}
		.btnHover1{
			background-color: #008d07;
		}
		.btnHover2{
			color: #FFFFFF;
			background-color: #ababab;
		}
	}
}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>